<template>
	<view class="content">
		<view class="header">
			<view class="title">
				图表
			</view>
			<view class="date_warp">
				<view class="date_warp_left">
					<view v-for="(item,index) in tabList1" :key="index" @click="activeClick1(index)"
						:class="active1===index?'active':''">
						{{item}}
					</view>
				</view>
				<view class="date_warp_right">
					<view v-for="(item,index) in tabList2" :key="index" @click="activeClick2(index)"
						:class="active2===index?'active':''">
						{{item}}
					</view>
				</view>
			</view>
		</view>
		<view class="main">
			<view class="main_title">
				{{mainTitle}}
			</view>
			<view class="all_text">
				{{allText}}:<text>{{allNum}}</text>
			</view>
			<view class="mean">
				平均值:<text>{{mean}}</text>
			</view>
			<view class="chartWarp">
				<ui-echarts ref="chart" height='150px' :option="option" exportBase64></ui-echarts>
			</view>
			<view class="mian_list_title">
				支出排行榜
			</view>
			<view v-for="(item,index) in mainList" :key="index" class="main_list">
				<image :src="item.imgUrl" mode=""></image>
				<view class="main_list_item">
					<view>
						<view>{{item.name}}<text>{{item.percent}}</text></view>
						<view>{{item.money}}</view>
					</view>
					<view class="line" :style="'width: '+item.percent+';'"></view>
				</view>
			</view>
		</view>
		<Tabbar :page="page" @addCheck='isAddCheck=true'></Tabbar>
		
		<addList v-if="isAddCheck" @Cancel="isAddCheck=false"></addList>
	</view>
</template>

<script>
	// import * as echarts from '../../ec-canvas/echarts'
	export default {
		data() {
			return {
				isAddCheck:false,
				page: '/pages/tabbar/tabbar-2/tabbar-2',
				title: 'Hello',
				tabList1: ["支出", "收入"],
				tabList2: ["周", "月", "年"],
				active1: 0,
				active2: 2,
				allText: '总支出',
				allNum: '25.22',
				mean: '5.2',
				option: {},
				mainTitle: '今年',
				mainList: [{
						name: '餐饮',
						imgUrl: '/static/img/release.png',
						percent: '88%',
						money: '8899'
					},
					{
						name: '餐饮',
						imgUrl: '/static/img/release.png',
						percent: '22%',
						money: '8899'
					}
				]
			}
		},
		onLoad() {
			this.getData()
		},
		onReady() {
			this.option = {
				grid: {
					right: 16,
					top: 10,
					left: 16,
					bottom: 18
				},
				xAxis: {
					type: 'category',
					data: ['13', '14', '15', '16', '17', '18', '19'],
					axisLine: {
						lineStyle: {
							color: '#ccc', // x轴颜色
						}
					},
					axisTick: {
						show: false,

					}
				},
				yAxis: {
					type: 'value',
					min: 'dataMin' - 20, // 设置 y 轴最小值为数据最小值
					max: 'dataMax' + 20,
					axisTick: {
						show: false, // 显示刻度
						alignWithLabel: true // 刻度与标签对齐
					},
					axisLabel: {
						show: false // 不显示标签
					},
					splitLine: {
						show: false // 不显示分割线
					},

				},

				series: [{
					data: [150, 230, 224, 218, 135, 147, 260],
					type: 'line',
					lineStyle: {
						color: ' #ccc'
					},
					itemStyle: {
						color: '#666'
					}
				}]
			}
		},
		methods: {
			activeClick1(val) {
				this.active1 = val

				if (val === 0) {
					this.allText = '总支出'

				} else {
					this.allText = '总收入'
				}
			},
			activeClick2(val) {
				this.active2 = val

				if (val === 0) {
					this.mainTitle = '本周'
				} else if (val === 1) {
					this.mainTitle = '本月'

				} else {
					this.mainTitle = '今年'
				}
			},
			getData() {
				let param = {
					timeType: "1",
					type: "1",
					userId: "1"
				}
				uni.request({
					url: 'http://10.43.131.189:8080/api/report/list', // 例如：'https://api.example.com/login'
					method: 'POST',
					data: param,
					success: (res) => {
						if (res.data) {
							// 登录成功，保存用户信息并跳转页面
							uni.setStorageSync('userInfo', res.data); // 假设后端返回一个token
							uni.navigateTo({
								url: '/pages/tabbar/tabbar-5/tabbar-5'
							}); // 跳转到首页或其他页面
						} else {
							uni.showToast({
								title: '登录失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						console.log(param)
						uni.showToast({
							title: '请求失败',
							icon: 'none'
						});
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		/* text-align: center;
		height: 400upx;
		padding-top: 200upx; */
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1000;
	}

	.header {
		background-color: yellow;

	}

	.title {
		font-size: 24px;
		color: #000;
		padding-top: 23px;
		text-align: center;
	}

	.date_warp {
		display: flex;
		justify-content: space-between;
		padding: 0 16px;
		margin-top: 12px;
		padding-bottom: 12px;
	}

	.date_warp_left,
	.date_warp_right {
		box-sizing: border-box;
		border: 1px solid #555500;
		height: 25px;
		font-size: 14px;
		line-height: 25px;
		border-radius: 6px;
		display: flex;
		text-align: center;
	}

	.date_warp_left>view,
	.date_warp_right>view {
		width: 50px;
		border-right: 1px solid #555500;
	}

	.date_warp_left>view:last-child,
	.date_warp_right>view:last-child {
		/* width: 50px; */
		border-right: none;
	}

	.active {
		background-color: #555500;
		color: yellow;
	}

	/* .main{
		padding: 0 16px;
	 */
	.main_title {
		font-size: 12px;
		width: 70px;
		text-align: center;
		border-bottom: 2px solid #000;
		height: 25px;
		line-height: 25px;
	}

	.all_text {
		margin-top: 15px;
		padding-left: 16px;
		font-size: 12px;
	}

	.all_text>text,
	.mean>text {
		margin-left: 8px;
	}

	.mean {
		padding-left: 16px;
		font-size: 12px;
		margin-top: 5px;
	}

	.chartWarp {
		/* padding: 0 16px; */
		margin-top: 16px;
		heigit: 200px;
		overflow: hidden;
		padding-bottom: 12px;
		/* border-top: 1px solid #ccc; */
		border-bottom: 1px solid #ccc;
	}

	.mian_list_title {
		padding: 0 16px;
		font-size: 12px;
		height: 20px;
		line-height: 20px;
	}

	.main_list {
		margin-top: 15px;
		display: flex;
		align-items: center;
		padding: 0 16px;
		margin-top: 12px;
	}

	.main_list>view {
		flex: 1;
	}

	.main_list>image {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		overflow: hidden;
		margin-right: 30px;
	}

	.main_list_item>view:first-child {
		display: flex;
		justify-content: space-between;
	}

	.line {
		background: yellow;
		height: 6px;
		border-radius: 3px;
		margin-top: 6px;
	}
</style>